// [data-theme]{
	page {
		width: 100%;
		background: #fff!important;
	}

	.align-right{
		text-align: right;
	}

	.container{
		width: 100vw;
		height: 100vh;
	}

	.header-wrap {
		width: 100%;
		height: 400rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: bottom;
		position: relative;
		.header-bg{
			width: 100%;
			margin-top: 60rpx;
		}
		.bottom-wrap {
			position: absolute;
			height: 100rpx;
			width: 100%;
			left: 0;
			bottom: 0;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: bottom;
		}
		
		.face-wrap{
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 4rpx solid #f5f5f5;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%) translateY(50%);
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}

	.body-wrap{
		margin-top: 100rpx;
		padding-bottom: 100rpx;
		
		.form-wrap {
			width: 80%;
			margin: 0 auto;
			
			.input-wrap {
				position: relative;
				width: 100%;
				box-sizing: border-box;
				height: 60rpx;
				padding-left: 60rpx;
				margin-top: 60rpx;
				
				
				.iconfont {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					left: 0;
					right: 0;
					line-height: 60rpx;
					font-size: 36rpx;
					color: #333;
					font-weight: 600;
				}
				
				.content {
					display: flex;
					height: 60rpx;
					border-bottom: 1px solid #eee;
					
					.input{
						flex: 1;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
					}
					
					.input-placeholder {
						font-size: 28rpx;
						color: #e5e5e5;
						line-height: 60rpx;
					}
					
					.captcha {
						margin: 4rpx;
						height: 52rpx;
						width: 140rpx;
					}
					
					.dynacode{
						line-height: 60rpx;
						font-size: 24rpx;
					}
					
					.area-code{
						line-height: 60rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
		
		.forget-section{
			display: flex;
			width: 80%;
			margin: 40rpx auto;
			
			view{
				flex: 1;
				font-size: 24rpx;
				line-height: 1;
			}
		}
		
		.login-btn, .auth-login{
			width: 80%;
			margin: 0 auto;
			margin-top: 50rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 90rpx;
			color: #fff;
			text-align: center;
			border: 1px solid #ffffff;
		}
		
		.auth-login{
			margin-top: 20rpx;
			background-color: #fff;
		}
		
		.regisiter-agreement{
			text-align: center;
			margin-top: 30rpx;
			line-height: 1;
		}
		
		.regisiter-agreement{
			font-size: 24rpx;
		}
	}

	.conten-box {
		padding: 0 $ns-padding $ns-padding;
		
		.title {
			line-height: 100rpx;
			font-size: $ns-font-size-lg + 4rpx;
			font-weight: bold;
			border-bottom: 2rpx solid $ns-border-color-gray;
			margin-bottom: $ns-margin;
		}
		.con {
			width: 100%;
			min-height: 600rpx;
			overflow-y: scroll;
			text-align: left;
			text-indent: 50rpx;
		}
	}

	.login-btn-box{
		margin-top: 50rpx; 
	}
	.login-btn-box.active{
		margin: 30rpx 0 50rpx;
	}
	
	.third-login{
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		&>view{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			margin: 0 80rpx;
		}
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}	
// }

